<template>
    <div class="rx-mobile-js-custom">
        <div
            style="overflow: hidden;height:calc( 100% - 74px );border-bottom: 1px solid #e6e8eb;border-top: 1px solid #e6e8eb;">
            <rx-monaco-editor
                ref="mobileScript"
                v-model="mobileScript"
                language="javascript"
                style="height:1000px;"
            >
                <template v-slot:monacoeditor>
                    <div style="display: flex;align-items: center;height: 100%">
                        <a-dropdown>
                            <a-menu slot="overlay">
                                <a-menu-item v-for="(obj,index) in commonJsLib" :key="index" @click="clickCommon(obj)">
                                    {{ obj.name }}
                                </a-menu-item>
                            </a-menu>
<!--                            <a-button style="margin-right: 8px">{{ i18n('isButton.insertFunc', '插入函数') }}
                                <a-icon type="down"/>
                            </a-button>-->
                        </a-dropdown>
                    </div>
                </template>
            </rx-monaco-editor>
        </div>
    </div>
</template>

<script>
import {Dialog, RxMonacoEditor} from "@lowcode/jpaas-common-lib"

export default {
    name: "mobileJsCustom",
    components: {
        RxMonacoEditor
    },
    props: {
        customConfig: Object,
    },
    data() {
        return {
            vm: null,
            mobileScript: "",
            commonJsLib: [
                {
                    name: this.i18n('isButton.insertCallScript', '插入调用脚本'),
                    clickEvent: 'insertInvokeMobileScript'
                }, {
                    name: this.i18n('isButton.insertCustomQuery', '插入自定义查询'),
                    clickEvent: 'insertMobileCustomQuery'
                }, {
                    name: this.i18n('isButton.insertInterface', '插入第三方接口'),
                    clickEvent: 'insertInvokeMobileInterface'
                }, {
                    name: this.i18n('isButton.ajaxPostJson', 'AJAX请求(postJson)'),
                    clickEvent: 'insertPostJson'
                }, {
                    name: this.i18n('isButton.ajaxGet', 'AJAX请求(get)'),
                    clickEvent: 'insertGet',
                }, {
                    name: this.i18n('isButton.ajaxPostForm', 'AJAX请求(postForm)'),
                    clickEvent: 'insertPostForm'
                }, {
                    name: this.i18n('isButton.insertOpenForm', '插入打开表单'),
                    clickEvent: "insertOpenFormScript"
                }
            ]
            // {
            //     name: '插入打开对话框',
            //         clickEvent: 'insertOpenDialog'
            // }
        }
    },
    created(){
        this.setData();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },

        mobileI18n(name, text, key) {
            return this.$ti18(name, text, "formMobile", key);
        },
        setData() {
            if(!this.customConfig || !this.customConfig.jsStr){
                return;
            }
            this.mobileScript = this.customConfig.jsStr;
        },
        clickCommon(obj) {
            switch (obj.clickEvent) {
                case 'insertInvokeMobileScript':
                    this.insertInvokeMobileScript()
                    break;
                case 'insertMobileCustomQuery':
                    this.insertMobileCustomQuery();
                    break;
                case 'insertInvokeMobileInterface':
                    this.insertInvokeMobileInterface();
                    break;
                case 'insertPostJson':
                    this.insertPostJson();
                    break;
                case 'insertGet':
                    this.insertGet();
                    break;
                case 'insertPostForm':
                    this.insertPostForm();
                    break;
                case 'insertOpenFormScript':
                    this.insertOpenFormScript()
                    break;
                case 'insertOpenDialog':
                    this.insertOpenDialog();
                    break;

            }
        },
        insertInvokeMobileScript() {
            var self_ = this;
            this.vm.insertInvokeScript(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertMobileCustomQuery() {
            var self_ = this;
            this.vm.insertCustomQuery(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertInvokeMobileInterface() {
            var self_ = this;
            this.vm.insertInvokeInterface(function (script) {
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        insertPostJson() {
            let self_ = this;
            let script = `
            //插入postJson函数
            let params={key:"",}
            this.http.mobilePostJson(url,params).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        insertGet() {
            let self_ = this;
            let script = `
            //插入get函数,参数可以为空
            //let id='1'
            //url = 'api?id='+this.id'
            this.http.mobileGet(url).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        insertPostForm() {
            let self_ = this;
            let script = `
            //插入post函数
            let params={key:"",}
            this.http.mobilePost(url,params).then(res=>{})`;
            self_.$refs.mobileScript.insertContent(script);
        },
        /*
        打开表单方案
         */
        insertOpenFormScript() {
            let self_ = this;
            var config = {
                curVm: this, widthHeight: ['900px', '600px'],
                data: {params: {}}
            };

            Dialog.openFormDialog(config, (res) => {
                let script = `
                /**
                *'` + self_.mobileI18n("msa.parameter1", "参数1:对话框别名,参数2:对话框名称,参数3:是否只读,") + `'
                *'` + self_.mobileI18n("msa.parameter2", "参数4:主键,参数5:传递到表单数据,") + `'
                *'` + self_.mobileI18n("msa.parameter3", "参数6:回调函数,参数7:保存后是否关闭打开的窗口") + `'
                */
                this.openForm("${res.alias}","${res.name}",false,"",{},function(action,data){
                 console.info(data);
             },true)`;
                self_.$refs.mobileScript.insertContent(script);
            })
        },
        /*
        打开对话框
         */
        insertOpenDialog() {
            let self_ = this;
            Dialog.openFormBoListDialog({
                curVm: this,
                data: {single: true, isDialog: 'YES', isDataGrant: true},
                widthHeight: ['1000px', '600px']
            }, function (self, data, pmtAlias) {
                var obj = data[0];
                let params = {single: obj.multiSelect == "NO"};
                if (pmtAlias) {
                    params.pmtAlias = pmtAlias;
                }
                let searchJson = obj.searchJson;
                let objParams = self.getParams(searchJson);
                objParams = Object.assign(params, objParams);
                let strParams = JSON.stringify(objParams);
                var str = "/**\n" +
                    self_.mobileI18n("msa.openDialog", "打开对话框") + "：" + obj.name +
                    " */\n";
                str += "this.openList(\"" + obj.key + "\"," + strParams + ",";
                str += "{max:" + (obj.isMax == "YES") + ",widthHeight:['" + obj.width + "px', '" + obj.height + "px']},function(action,data){\n";
                str += "   //data:" + self_.mobileI18n("msa.selectDialogData", "对话框选择数据") + "\n";
                str += "});";
                self_.$refs.mobileScript.insertContent(str);
            })
        },
        getParams(searchJson) {
            let params = {};
            if (!searchJson) {
                return params;
            }
            let json = JSON.parse(searchJson);
            let aryJson = json.filter(item => {
                return item.type == "income";
            });
            if (aryJson.length == 0) {
                return params;
            }
            for (let i = 0; i < aryJson.length; i++) {
                let obj = aryJson[i];
                var tabPre = obj.tablePre ? obj.tablePre + "." : "";
                var type = this.getType(obj.dataType);
                var val = "Q_" + tabPre + obj.fieldName + "_" + type + "_" + obj.fieldOp;
                params[val] = "";
            }
            return params;
        },
        getType(type) {
            var typeObj = {string: "S", number: "I", date: "D"};
            if (typeObj[type]) {
                return typeObj[type];
            }
            return "S";
        },
    },
    watch:{
        mobileScript:{
            handler: function (val, oldVal) {
                var self_ = this ;
                setTimeout(function (){
                    self_.$emit('jsStrChange',val);
                },500);
            },
            deep: true
        }

    }
}
</script>

<style scoped>
.rx-mobile-js-custom {
    height: 100%;
}

.rx-mobile-js-custom-toolbar {
    padding-bottom: 10px;
}

.rx-mobile-js-custom-toolbar button {
    margin-right: 10px;
}
</style>